<template>
  <div class="container-item-info-address">
    <div class="item-name">{{ value.username }} <span class="item-phone">{{ value.mobile }}</span></div>
    <div class="item-address">{{ contant_address }}</div>
    <img v-if="showBtn" class="item-btn-edit" src="@/assets/change.png" @click="routerLink('address')">
  </div>
</template>

<script>
export default {
  props: {
    showBtn: {
      type: Boolean,
      default: false
    },
    value: {
      type: Object,
      default() {
        const obj = {
          username: '九条米法',
          mobile: '13344445556',
          province_name: '北京市',
          city_name: '市辖区',
          area_name: '东城区',
          address: '某某某街道'
        }
        return obj
      }
    }
  },
  computed: {
    contant_address() {
      const { province_name, city_name, area_name, address } = this.value
      return `${province_name} ${city_name} ${area_name} ${address}`
    }
  },
  methods: {
    routerLink(name) {
      this.$router.push({ name })
    }
  }
}
</script>

<style lang="less">
.container-item-info-address{
    padding: 10px;
    position: relative;
    .item{
        &-name{
            font-weight: bold;
            margin-bottom: 10px;
        }
        &-phone{
            margin-left:  20px;
            font-weight: normal;
        }
        &-address{
          font-size: 14px;
        }
        &-btn-edit{
            width: 15px;
            height: 15px;
            position: absolute;
            top: 10px;
            right: 10px;
        }
    }
}
</style>
